<template>
  <a-modal :width="656" title="保存分期账单" @cancel="close" :visible="visible" unmount-on-close>
    <div class="confirm-content">
      <!-- 首尾款变化提示 -->
      <div class="confirm-item" v-if="confirmData.amountData?.length > 0">
        <div class="confirm-item-title">{{ getInitialOrBalanceAmountChangeTitleFn() }}</div>
        <div class="confirm-item-content">
          <div class="compare compare-left">
            <div class="compare-title">修改前</div>
            <div class="compare-content">
              <div class="change-item" v-for="(item, index) in confirmData.amountData" :key="index">
                <span class="change-item-title">{{ item.name }}：</span>
                <span class="change-item-value">{{ addUnit(item.prev, '元') }}</span>
              </div>
            </div>
          </div>
          <div class="compare compare-right">
            <div class="compare-title">修改后</div>
            <div class="compare-content">
              <div class="change-item" v-for="(item, index) in confirmData.amountData" :key="index">
                <span class="change-item-title">{{ item.name }}：</span>
                <span class="change-item-value">{{ addUnit(item.now, '元') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a-divider style="margin: 20px 0 16px" v-if="confirmData.totalAmount?.change" />
      <!-- 总金额变化提示 -->
      <div class="confirm-item" v-if="confirmData.totalAmount?.change">
        <div class="confirm-item-title">账单总金额发生变化，是否要保存？</div>
        <div class="confirm-item-content">
          <div class="compare compare-left">
            <div class="compare-title">修改前</div>
            <div class="compare-content">
              <div class="change-item">
                <span class="change-item-title">账单总金额：</span>
                <span class="change-item-value">{{ addUnit(confirmData.totalAmount.prev, '元') }}</span>
              </div>
            </div>
          </div>
          <div class="compare compare-right">
            <div class="compare-title">修改后</div>
            <div class="compare-content">
              <div class="change-item">
                <span class="change-item-title">账单总金额：</span>
                <span class="change-item-value">{{ addUnit(confirmData.totalAmount.now, '元') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a-divider style="margin: 20px 0 16px" v-if="confirmData.lnstalmentNum?.change" />
      <!-- 分期期数变化提示 -->
      <div class="confirm-item" v-if="confirmData.lnstalmentNum?.change">
        <div class="confirm-item-title">分期期数发生变化，是否要保存？</div>
        <div class="confirm-item-content">
          <div class="compare compare-left">
            <div class="compare-title">修改前</div>
            <div class="compare-content">
              <div class="change-item">
                <span class="change-item-title">分期期数：</span>
                <span class="change-item-value">{{ addUnit(confirmData.lnstalmentNum.prev, '期') }}</span>
              </div>
            </div>
          </div>
          <div class="compare compare-right">
            <div class="compare-title">修改后</div>
            <div class="compare-content">
              <div class="change-item">
                <span class="change-item-title">分期期数：</span>
                <span class="change-item-value">{{ addUnit(confirmData.lnstalmentNum.now, '期') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="handleOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="CarPaymentPlanConfirmModal">
  import { ref } from 'vue'
  const visible = ref(false)
  const confirmData = ref({})
  const emit = defineEmits(['ok'])
  const open = (data) => {
    confirmData.value = data
    visible.value = true
  }
  const getInitialOrBalanceAmountChangeTitleFn = () => {
    if (confirmData.value.amountData) {
      const names = confirmData.value.amountData
        .filter((item) => item && item.name) // 确保 item 存在且有 name 属性
        .map((item) => item.name)
      if (names.length > 0) {
        return `${names.join('/')}金额发生变化，是否要保存？`
      }
    } else {
      return ''
    }
  }
  const addUnit = (val, unit) => {
    if (val != '删除') {
      return val + ' ' + unit
    }
    return val
  }
  const handleOk = () => {
    emit('ok', confirmData.value)
    close()
  }
  const close = () => {
    visible.value = false
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .confirm-item-title {
    font-size: 14px;
    color: #165dff;
    font-weight: 600;
    text-align: center;
    margin: 20px 0 10px;
  }
  .confirm-item:first-of-type {
    .confirm-item-title {
      margin-top: 0;
    }
  }
  .confirm-tips {
    color: #ff5b60;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .confirm-item-content {
    .compare {
      padding: 20px;
      width: calc(50% - 8px);
      display: inline-block;
    }
    .compare + .compare {
      margin-left: 16px;
    }
    .change-item + .change-item {
      margin-top: 8px;
    }
    .compare-left {
      background: #fbfbfc;
    }
    .compare-right {
      background: rgba(22, 93, 255, 0.05);
    }
    .compare-title {
      color: #1d2129;
      margin-bottom: 10px;
    }
    .change-item-title {
      color: #4e5969;
    }
    .change-item-value {
      color: #1d2129;
    }
  }
</style>
